<template>
  <div class="update-task">
    <template v-if="tasks.length > 0">
      <div v-for="(item, index) in tasks" :key="index" class="task">
        <span class="title">{{ item.title }}</span>
        <myprogress :num="item.num" :sum="item.num" />
        <el-button v-show="item.finished" type="success" icon="el-icon-check" size="mini" circle @click="removeTask(item.taskId)" />
      </div>
    </template>
    <template v-else>
      <div class="empty">还没添加任务^-^</div>
    </template>
  </div>
</template>

<script>
import myprogress from '@/components/Progress/index.vue'
export default {
  components: {
    myprogress
  },
  props: {
    tasks: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {}
  },
  methods: {
    removeTask(taskId) {
      this.$emit('removeTask', taskId)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/mixin.scss';
.task{
  display: flex;
  width: 290px;
  margin: 10px auto;
  .title{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 130px;
    text-align: right;
    margin-right: 5px;
    line-height: 18px;
    font-size: 12px;
  }
}
.update-task{
  height: 80vh;
  .empty{
    @include boxCenter;
  }
}
</style>
